<!--
	易损性数据分省统计
	Created by Penglei on 2023/08/10
-->
<template>
	<div id="echartsRef" ref="echartsRef" class="echats-box"></div>
</template>

<script setup name="DestructionComparison">
import { onMounted } from 'vue';
// 引入echats
import * as echarts from 'echarts';
// 引入接口
import { getDestructionComparisonApi } from '@/api/vulnerability';
// 引入公用方法
import { ArrayObjUniq } from '@/utils/ruoyi';

let myChart = null;
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('echartsRef'));
	}
	// 数据
	let dataAxis = [];
	let dataSource = [];
	if(data && data.length) {
		// 数据去重并遍历
		ArrayObjUniq(data, 'province').map((item, index) => {
			// 名称
			dataAxis.push(item.province);
			// 数据
			dataSource.push({
				...item
			});
		});
	}
	// let dataAxis = ['上海市', '黑龙江省', '吉林省', '辽宁省', '内蒙古自治区', '山西省', '河北省', '天津市', '北京市'];
	// let dataSource = [
	// 	{ province:'上海市', intactProportion: 0.6, slightProportion: 0.2, middleProportion: 0.15, acuteProportion: 0.1, damageProportion: 0.05 },
	// 	{ province:'黑龙江省', intactProportion: 0.6, slightProportion: 0.2, middleProportion: 0.15, acuteProportion: 0.1, damageProportion: 0.05 },
	// 	{ province:'吉林省', intactProportion: 0.6, slightProportion: 0.2, middleProportion: 0.15, acuteProportion: 0.1, damageProportion: 0.05 },
	// 	{ province:'辽宁省', intactProportion: 0.6, slightProportion: 0.2, middleProportion: 0.15, acuteProportion: 0.1, damageProportion: 0.05 },
	// 	{ province:'内蒙古自治区', intactProportion: 0.4, slightProportion: 0.2, middleProportion: 0.2, acuteProportion: 0.1, damageProportion: 0.1 },
	// 	{ province:'山西省', intactProportion: 0.5, slightProportion: 0.2, middleProportion: 0.1, acuteProportion: 0.1, damageProportion: 0.1 },
	// 	{ province:'河北省', intactProportion: 0.5, slightProportion: 0.2, middleProportion: 0.1, acuteProportion: 0.1, damageProportion: 0.1 },
	// 	{ province:'天津市', intactProportion: 0.5, slightProportion: 0.2, middleProportion: 0.1, acuteProportion: 0.1, damageProportion: 0.1 },
	// 	{ province:'北京市', intactProportion: 0.5, slightProportion: 0.2, middleProportion: 0.1, acuteProportion: 0.1, damageProportion: 0.1 },
	// ];

	// 配置项
	const option = {
		dataset: {
			// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
			// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
			dimensions: ['province', 'intactProportion', 'slightProportion', 'middleProportion', 'acuteProportion', 'damageProportion'],
			source: dataSource || []
		},
		title: {
			show: false
		},
		// 提示
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
		},
		// 图例
		legend: {
			top: 13,
			bottom: 13,
			right: 74,
			align: 'left',
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 30,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF70',
			},
		},
		xAxis: {
			type: 'value',
			min: 0,
			// max: 1,
			axisLine: {
				show: true,
				lineStyle: {
					width: 2,
					color: '#418DFD'
				},
			},
			axisTick: {
				// show: false,
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				color: '#999999',
			},
			splitLine: {
				show: false,
			}
		},
		yAxis: {
			type: 'category',
			data: dataAxis,
			// 不显示线条和刻度
			axisLine: {
				show: false,
				color: '#999999',
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 11,
				color: '#FFFFFF',
				// align: 'right',
			},
			splitLine: {
				show: false,
			}
		},
		grid: {
			show: false,
			left: '23%',
			right: '10%',
			top: 40,
			bottom: 30,
		},
		series: [
			{
				name: '基本完好',
				type: 'bar',
				stack: 'total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				barWidth: '12',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#46FFFF' },
						{ offset: 1, color: '#A2FFFF' },
					]),
				},
			},
			{
				name: '轻微破坏',
				type: 'bar',
				stack: 'total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				barWidth: '12',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#428EFE' },
						{ offset: 1, color: '#9FC5FE' },
					]),
				},
			},
			{
				name: '中等破坏',
				type: 'bar',
				stack: 'total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				barWidth: '12',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#FFB35B' },
						{ offset: 1, color: '#FFD8AB' },
					]),
				},
			},
			{
				name: '严重破坏',
				type: 'bar',
				stack: 'total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				barWidth: '12',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#ED5385' },
						{ offset: 1, color: '#F5A7C0' },
					]),
				},
			},
			{
				name: '毁坏',
				type: 'bar',
				stack: 'total',
				label: {
					show: false
				},
				emphasis: {
					focus: 'series'
				},
				barWidth: '12',
				showBackground: false,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#FF2525' },
						{ offset: 1, color: '#FF8F8F' },
					]),
				},
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 加载数据
const getData = () => {
	getDestructionComparisonApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			// 渲染图表
			renderChart(data);
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
</script>

<style lang="scss" scoped>
.echats-box {
	width: 100%;
	height: 355px;
}
</style>